<template>
  <div class="box">
    <div id="miao" style="height: 1px; width: 100%;background: none;"></div>
    <div>{{user_info[0].id}}</div>
    <div class="logo-top">
      <div class="warp-box">
        <router-link to="/reg" tag="a" class="logo">MMall</router-link>
        <router-view></router-view>
      </div>
    </div>
    <div class="user-con">
      <div class="user-warp">
        <div class="user-title">用户登录</div>
        <div style="padding: 20px 20px 0 20px;box-sizing: border-box;">
          <i-alert v-if="error_show" type="error">{{error_text}}</i-alert>
        </div>
        <div class="user-box">
          <ipt is_type="md-person" is_placeholder="请输入用户名" is_name="username" @get_val="get_inp_val"></ipt>

          <ipt is_type="md-lock" is_placeholder="请输入密码" is_ipt_type="password" is_name="userpas" @get_val="get_inp_val"></ipt>
          <button class="user-btn" @click="btn_submit">登录</button>
          <div class="link-item">
            <router-link to="/reg" tag="a" class="link pass-forget">忘记密码</router-link>
            <router-link to="/reg" tag="a" class="link pass-forget">免费注册</router-link>
            <router-view></router-view>
          </div>
        </div>
      </div>
      <van-button type="default">默认按钮</van-button>
     </div>

    <div style="position: fixed;right: 10px;z-index: 10000;bottom: 24px;">
      <circle-menu ref="circle" type="top" :number="4" mask='black' :btn="true" :circle="true"
      :colors="colors">

          <a slot="item_1" @click="tabclick" >aa</a>
          <a slot="item_2" class="fa fa-weixin fa-lg"></a>
          <a slot="item_3" class="fa fa-weibo fa-lg"></a>
           <a slot="item_4" class="fa fa-weibo fa-lg"></a>

      </circle-menu>

    </div>

     <!-- <toggle-menu :menuItems="menuItems"
                   @clickMenu="clickMenu"
                   position="RB"
                   baseDistance="150"
                   ></toggle-menu> -->
    </div>

</template>

<script>
  import Vue from "vue"
  /* import ipt from '@/base/ipt/ipt' */
  import {mapState,mapMutations} from "vuex"
  import {postLogin, getList,getProd} from '@/api/api'
 import toggleMenu from "@/components/login/toggleMenu.vue"
 import CircleMenu from 'vue-circle-menu'
 import { Button } from 'vant';
 Vue.use(Button)
  export default {
    name: 'login',
    data() {
      return {
        colors:['#f0a28e', '#ffa000','#00e676', '#8e24aa', '#40c4ff'],
        user_form: {
          username: '',
          userpas: ''

        },
        menuItems: [
               {id:0,name: 'menu1', src:""},

        ],
        error_show: false,
        error_text: ''
      }
    },
    methods: {
      ...mapMutations("user",["set_user_info"]),
      set_user_info_time(){
        let _this = this
        let time = setInterval(function(){
          let arr =[]
          let ran =  Math.ceil(Math.random()*100)
          for(let i = 0; i<ran;i++){
            let json = {id:i,name:"mun"+i}
            arr.push(json)
          }
          _this.set_user_info(arr)
        },5000)

      },
      tabclick(){
        this.$refs.circle.toggle()
        console.log("aaaa")
      },

      clickMenu(){

      },
      get_inp_val(v) {
        this.user_form[`${v.key}`] = v.value
      },
      btn_submit() {
        let _this = this
        let form_data = this.user_form
        let username = form_data.username
        let password = form_data.userpas
        let name_reg = /^[0-9a-zA-Z\u4e00-\u9fa5_]{2,16}$/
        let pass_reg = /^[a-zA-Z0-9]{6,16}$/
        if (!(name_reg.test(username))) {
          this.error_text_all(true, '用户名为2到8位的英文,数字或者中文')
          return false
        }
        if (!(pass_reg.test(password))) {
          this.error_text_all(true, '请输入6-16位含有英文和数字的密码')
          return false
        }
        this.error_text_all(false, '')
        let data = {
          username: username,
          password: password
        }
        postLogin(data).then((res) => {
          console.log('aaaa', res)
          if (res.status == 1) {
            _this.error_text_all(true, res.msg)
          } else if (res.status == 0) {
            _this.$store.commit('user/set_user_info', res.data)
            _this.$router.push('/reg')
          }
        }).catch((err) => {
          console.log('login  err', err)
        })
      },
      error_text_all(type, text) {
        this.error_show = type
        this.error_text = text
      }

    },
    computed:{
      ...mapState("user",['user_info'])
    },
    watch:{

    },
    mounted() {
      this.set_user_info_time()
    },
    created() {
      this.user_form = {
        username: '',
        userpas: ''
      }
      this.error_show = false
      this.error_text = ''
      /* getList().then(res=>{
                  console.log("list",res)
              }).catch(err=>{
                  console.log("list err",err)
              }) */
      /* getProd().then(res => {
        console.log('list', res)
      }).catch(err => {
        console.log('list err', err)
      }) */


    },
    components: {
      toggleMenu,CircleMenu,
    }
  }
</script>

<style scoped>
  .box {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    height: 100%;
    overflow-y: scroll;
  }
  .miao-item{
    height: 100px;
    width: 100%;
    margin-bottom: 10px;
    background: chocolate;
  }
  .is_aa{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    background-color: #42B983;
    border-radius: 50% 50%;
  }
  .logo-top {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ddd;
    background: #fff;
  }

  .warp-box {
    width: 1080px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }

  .logo {
    margin-right: 20px;
    font-size: 26px;
    font-weight: 700;
    color: #c60023;
    text-decoration: none;
  }

  .user-con {
    width: 100%;
    padding: 40px 0;
    background: #e72955;
  }

  .user-warp {
    position: relative;
    width: 400px;
    margin: 0 auto;
    background: #fff;
  }

  .user-title {
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 700;
    color: #666;
  }

  .user-box {
    padding: 20px 20px;
  }

  .user-btn {
    display: block;
    padding: 6px 0;
    width: 100%;
    text-align: center;
    background: #e4393c;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    border: none;
    outline: none;
  }

  .user-con .link-item {
    margin: 15px auto 0;
    text-align: right;
    color: #666;
  }

  .user-con .link {
    padding: 0 5px;
    color: #666;
    text-decoration: none;
  }
</style>
